<template>
	<view class="page padding-bottom">
		<!-- 标题栏 start -->
		<view class="page-bar" style="height: 50px;">
				
		</view>
		<view :style="{ height: StatusBar + 'px' }"></view>
		<!-- 标题栏 end -->
		<!-- 头部 start -->
		<view class="page-header" :style="{ height: headerHight }">
			<!-- <view class="right align-center" style="" @click="handleJump"
				data-url="/pages/index/setting/setting/index">
				<image style="width: 44rpx;height: 44rpx; float: right; position: relative;z-index: 999;" src="../static/shez.png" class="call-img margin" />
			</view> -->
			<image src="../../../../static/home-bg.png" mode="widthFix" class="bg-img"></image>
			<!-- @click="goToLogin" -->
			<view class="header-info flex " @click="goToLogin">
				<view class="shop-logo flex justify-center">
					<view class="img">
						<fu-image :src="shopLogo" errorImg="/static/logo.png" mode="aspectFill">
						</fu-image>
					</view>
				</view>
				<view class="flex flex-direction text-white" style="padding-top:24rpx ;">
					<view class="flex align-center">
						<text class="shop-name text-bold flex-sub ">{{shopName}}</text>
						<!-- <text class="level flex align-center justify-center">{{level_name}}</text> -->
					</view>
					<!-- <view class="flex align-center" style="margin-top: 9rpx;">
						<text class="auth">{{certification_status}}</text>
						<image src="../static/rz.png" mode="" style="width: 126rpx;height: 33rpx;margin-right: 16rpx"></image>
						<view class="" style="margin-top: -8rpx;">
							<fu-star  :value="store_star" ></fu-star>
						</view>
						<text class="text-sm" style="margin-left: 10rpx;">{{store_star}}</text>
					</view> -->
					<!-- <view class="text-sm margin-top-xs">
						<text>主营行业：{{main_industry}}</text>
						<text class="margin-left">店铺状态：{{store_status}}</text>
					</view> -->
					<!-- <text class="text-sm margin-top-xs color-text">到期时间：{{expiration_time}}</text> -->
					<text class="text-sm margin-top-xs color-text" style="margin-top: 20rpx;">ID:{{uid}}</text>
				</view>
			</view>
		</view>
		<!-- 头部 end -->
		<view class="general-view margin-lr margin-tp  bg-white padding radius-16"
			style="background: linear-gradient( 180deg, #F9F2F5 0%,  #FFFFFF 100%);"
			:style="{marginTop:contentTop + 'px'}">
			<view class="flex justify-between align-center" @click="to_tixian()">
				<view>
					<view class="text-333">当前账户余额</view>
					<view class="text-333 text-xl  margin-top-sm" style="font-size: 60rpx;    font-weight: 500;">
						￥{{money.now_money?money.now_money:'0.00'}}</view>
				</view>
				
				<!-- <view class="flex">
					<view @click="to_tixian()">去提现 <image style="width: 14rpx;height: 14rpx;margin-left: 15rpx;margin-top:18rpx;" src="../../../../static/right-arrow.png" mode="widthFix" ></image></view>
				</view> -->
				<!-- <view class="tab-box flex">
					<block v-for="(item,index) in tabList" :key='item.type'>
						<text class="tab-item" :class="[tabType == item.type?'active':'']"
							@click="selectTab(item)">{{item.name}}</text>
					</block>
				</view> -->
			</view>
			<!-- <view class="flex"style="background: #F6F8FA;margin-top:36rpx;border-radius:12rpx;">
				<view class="flex flex-direction flex-sub text-center margin-top">
					<text class="text-sm">保证金</text>
					<text class="text-333 text-xl  margin-top-sm">{{money.stay_money}}</text>
				</view>
				<view class="flex flex-direction flex-sub text-center margin-top">
					<text class="text-sm">未入账</text>
					<text class="text-333 text-xl  margin-top-sm">{{money.freeze_money?money.freeze_money:'0.00'}}</text>
				</view>
				<view class="flex flex-direction flex-sub text-center margin-top">
					<text class="text-sm">可提现</text>
					<text class="text-333 text-xl  margin-top-sm">{{ money.now_money }}</text>
				</view>
			</view> -->
		</view>
		<!-- <view class="general-view margin-lr margin-tp bg-white padding radius-16"
			style="background: linear-gradient( 180deg, #FFEEEB 0%, #FBFCFF 47%, #FFFFFF 100%);">
			<view class="flex justify-between align-center">
				<text class="text-333">经营情况</text>
				<view class="tab-box flex">
					<block v-for="(item,index) in tabList" :key='item.type'>
						<text class="tab-item" :class="[tabType == item.type?'active':'']"
							@click="selectTab(item)">{{item.name}}</text>
					</block>
				</view>
			</view>
			<view class="flex">
				<view class="flex flex-direction flex-sub text-center margin-top">
					<text class="text-sm">交易订单数</text>
					<text class="text-333 text-xl  margin-top-sm">{{orderStatistics.order_num}}单</text>
				</view>
				<view class="flex flex-direction flex-sub text-center margin-top">
					<text class="text-sm">交易额</text>
					<text class="text-333 text-xl  margin-top-sm">{{orderStatistics.total_money}}</text>
				</view>
				<view class="flex flex-direction flex-sub text-center margin-top">
					<text class="text-sm">店铺收藏数</text>
					<text class="text-333 text-xl text-bold margin-top-sm">{{orderStatistics.collect_num}}</text>
				</view>
			</view>
		</view> -->
		<!-- 我的订单 start -->
		<!-- <view class="margin-lr margin-top-sm bg-white radius-16">
			<view class="flex my-order padding-right-sm">
				<view class="item flex-sub text-center padding" @click="switchToOrder('unpay')">
					<image src="../static/order-pic-1.png" mode="aspectFit"></image>
					<view class="txt text-sm">待付款</view>
					<view class="jiaobiao" v-if="order.wait_pay != 0">{{ order.wait_pay }}</view>
				</view>
				<view class="item flex-sub text-center padding" @click="switchToOrder('unship')">
					<image src="../static/order-pic-2.png" mode="aspectFit"></image>
					<view class="txt text-sm">待发货</view>
					<view class="jiaobiao" v-if="order.wait_send != 0">{{ order.wait_send }}</view>
				</view>
				<view class="item flex-sub text-center padding" @click="switchToOrder('ship')">
					<image src="../static/order-pic-3.png" mode="aspectFit"></image>
					<view class="txt text-sm">待收货</view>
					<view class="jiaobiao" v-if="order.wait_receive != 0">{{ order.wait_receive }}</view>
				</view>
				<view class="item flex-sub text-center padding" @click="switchToOrder('unevaluation')">
					<image src="../static/order-pic-4.png" mode="aspectFit"></image>
					<view class="txt text-sm">待评价</view>
					<view class="jiaobiao" v-if="order.wait_evaluation != 0">{{ order.wait_evaluation }}</view>
				</view>
				<view class="item flex-sub text-center padding" @click="switchToOrder('refund')" 
					data-url="/pages/order/order/order-list/index?type=refund">
					<image src="../static/order-pic-5.png" mode="aspectFit"></image>
					<view class="txt text-sm">售后</view>
					<view class="jiaobiao" v-if="order.after_sales != 0">{{ order.after_sales }}</view>
				</view>
			</view>
		</view> -->
		<!-- 我的订单 end -->
		<!-- fa start -->
		<view class="general-view margin-lr margin-tp bg-white padding radius-16">
			<view class="flex justify-between align-center">
				<text class="text-333">常用工具</text>

				<!-- <view class="tab-box flex">
					<block v-for="(item,index) in tabList" :key='item.type'>
						<text class="tab-item" :class="[tabType == item.type?'active':'']"
							@click="selectTab(item)">{{item.name}}</text>
					</block>
				</view> -->
			</view>
			<view class="flex my-order">
				<!-- store_level  main_industry -->
				<view class="item flex-sub text-center padding" @click="handleJump"
					data-url="/pages/tab/management/management/index">
					<image :src="mineImage" mode="aspectFit"></image>
					<view class="text-sm text-black">商品管理</view>
				</view>
				<view class="item flex-sub text-center padding" @click="handleJump" data-url="/pages/tab/shop/info">
					<image :src="mineImage1" mode="aspectFit"></image>
					<view class="text-sm text-black">店铺管理</view>
				</view>
				<view class="item flex-sub text-center padding" @click="handleJump"
					data-url="/pages/index/setting/setting/index">
					<image :src="mineImage2" mode="aspectFit"></image>
					<view class="text-sm text-black" style="white-space: nowrap;">设置</view>
				</view>
				<view class="item flex-sub text-center padding" @click="handleJump"
					data-url="/pages/index/setting/setting/index?type=1">
					<image :src="mineImage3" mode="aspectFit"></image>
					<view class="text-sm text-black" style="white-space: nowrap;">平台规则</view>
				</view>
			<!-- 	<view class="item flex-sub text-center padding" @click="handleJump" data-url="/pages/user/circle/circle">
					<image src="../static/quan.png" mode="aspectFit"></image>
					<view class="text-sm text-black">马术圈动态</view>
				</view> -->
				<!-- <view class="item flex-sub text-center padding" @click="handleJump"
					data-url="/pages/order/evalue/evalue/shop">
					<image src="../static/ping.png" mode="aspectFit"></image>
					<view class="text-sm text-black">店铺评价</view>
				</view> -->
				<!-- <view v-if="store_level==2 || store_level==3"  class="item flex-sub text-center padding" @click="handleJump"
					data-url="/pages/service-message/service/service-detail/index2">
					<image src="../static/ke.png" mode="aspectFit"></image>
					<view class="text-sm text-black">平台客服</view>
				</view> -->
			</view>
			<view class="flex my-order">
				<!-- <view v-if="store_level == 1"  class="item flex-sub text-center padding" @click="handleJump"
					data-url="/pages/service-message/service/service-detail/index2">
					<image src="../static/ke.png" mode="aspectFit"></image>
					<view class="text-sm text-black">平台客服</view>
				</view> -->
				<!-- <view class="item flex-sub text-center padding" @click="handleJump"
					data-url="/pages/index/setting/setting/index">
					<image src="../static/shezi.png" mode="aspectFit"></image>
					<view class="text-sm text-black" style="white-space: nowrap;">设置</view>
				</view>
				<view class="item flex-sub text-center padding" @click="handleJump"
					data-url="/pages/index/setting/setting/index?type=1">
					<image src="../static/shezi.png" mode="aspectFit"></image>
					<view class="text-sm text-black" style="white-space: nowrap;">平台规则</view>
				</view> -->
				<!-- <view v-if="store_level==2 || store_level==3" class="item flex-sub text-center padding">
				</view> -->
				<view class="item flex-sub text-center padding">
				</view>
			</view>
			<!-- <view class="item flex-sub text-center padding" @click="handleJump" data-type='SWITCH'
				data-url="/pages/order/order/order-list/index">
				<image src="../static/query-2.png" mode="aspectFit"></image>
				<view class="text-sm text-black">订单管理</view>
			</view>
			
			<view class="item flex-sub text-center padding" @click="handleJump"
				data-url="/pages/tab/home/analysis/index">
				<image src="../static/query-4.png" mode="aspectFit"></image>
				<view class="text-sm text-black">数据分析</view>
			</view> -->
		</view>
		<!-- 快捷功能入口 end -->
		<!-- <line-charts :type="1" name='销售额(元)' ref="one"></line-charts> -->
		<!-- <line-charts :type="2" name='订单笔数(笔)' ref="two"></line-charts> -->

		<!-- 断网检测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网检测 end -->
		<!-- 升级检测 -->
		<app-update auto></app-update>
	</view>
</template>

<script>
	import {
		navigateToLogin
	} from '@/common/utils/utils.js';
	import lineCharts from '../../../../components/line-charts/line-charts.vue'
	export default {
		components: {
			lineCharts
		},
		data() {
			return {
				uid: 0,
				shopLogo: '', //店铺logo
				shopName: '', //店铺名称
				certification_status: '',
				store_star: '',
				tabType: 'day',
				store_status: '',
				main_industry: '',
				level_name: '',
				expiration_time: '',
				orderStatistics: '',
				order: '',
				money: [],
				tabList: [{
						name: '今日',
						type: 'day'
					},
					{
						name: '昨日',
						type: 'yesterday'
					}, {
						name: '总计',
						type: 'total'
					}
				],
				store_level:0,
				// main_industry: 0,
				mineImage:require('../static/goods.png'),
				mineImage1:require('../static/shop.png'),
				mineImage2:require('../static/shezi.png'),
				mineImage3:require('../static/shezi.png')
			};
		},
		computed: {
			//计算头部高度
			headerHight() {
				let h = 'calc(460rpx - ' + this.StatusBar + 'px)';
				return h;
			},
			// 计算标题栏背景图定位bottom位置
			/* bottomHight() {
				let h = 'calc(' + this.CustomBar + 'px - 460rpx)';
				return h;
			} */
			contentTop() {
				// #ifdef APP-PLUS
				return -this.StatusBar - 10
				// #endif
				return -20
			}
		},
		onLoad() {
			//app启动时启动页手动关闭
			// #ifdef APP-PLUS
			plus.navigator.closeSplashscreen();
			// #endif
			// 获取数据
			let USER_INFO = uni.getStorageSync("USER_INFO");
			if(USER_INFO){
				this.store_level = USER_INFO.store_level
				// this.main_industry = USER_INFO.main_industry
			}
		
		},
		onShow() {
			if (global.token) {
				let USER_INFO = uni.getStorageSync("USER_INFO");
				if(USER_INFO){
					this.store_level = USER_INFO.store_level
					// this.main_industry = USER_INFO.main_industry
				}
				this.getShopInfo();
				this.getMoney()
				this.$refs.one && this.$refs.one.getPageDataStatistics()
				this.$refs.one && this.$refs.two.getPageDataStatistics()
			} else {
				this.$util.navigateToLogin();
			}
		},
		methods: {
			goToLogin(){
				if(!global.token){
					uni.redirectTo({
						url: '/pages/user/login/login-password/index'
					})
				}
			},
			switchToOrder(type) {
				uni.setStorageSync('orderType', type)
				uni.switchTab({
					url: '/pages/order/order/order-list/index'
				})
			},
			selectTab(tab) {
				this.tabType = tab.type;
				this.getShopInfo();
			},
			to_tixian() {
				uni.navigateTo({
					url: '/pages/user/wallet/my-wallet/index'
				})
			},
			/**
			 * @description 跳转订单列表
			 * @param {Object} type == unpay 待付款 unship 待发货
			 */
			handleOrderList(type) {
				uni.navigateTo({
					url: '/pages/order/order/order-list/index?type=' + type
				})
			},
			//获取店铺金额
			getMoney() {
				let _this = this;
				_this.$api.post(global.apiUrls.getMerchantMoney, {
					partner_id: this.$store.state.userInfo.id
				}).then(res => {
					if (res.data.code == 1) {
						_this.money = res.data.data;
					}
				}).catch(err => {
					console.log(err, 'get_my_money')
				})
			},
			/**
			 * @description 获取店铺信息
			 */
			getShopInfo() {
				this.$api.post(global.apiUrls.getShopIndexInfo, {
					merchant_id: this.$store.getters.userInfo.id,
					date_selection: this.tabType
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						let info = res.data.data;
						this.orderStatistics = info.orderStatistics;
						this.order = info.order;
						this.myProduct = info.myProduct;
						this.certification_status = info.certification_status;
						this.store_star = info.store_star;
						this.store_status = info.store_status;
						// main_industry
						this.main_industry = info.main_industry;
						this.level_name = info.level_name;
						this.expiration_time = info.expiration_time;
						this.shopLogo = info.shopLogo;
						this.shopName = info.shopName;
						this.uid = res.data.user.id;
					} else {
						this.$message.info(res.data.msg);
					}
				}).catch(err => {
					console.log(err);
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	// 标题栏 start
	.page-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999999;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}

	// 标题栏 end
	// 头部 start
	.page-header {
		width: 100%;
		position: relative;

		.bg-img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.shop-logo {
			padding: 0 20rpx;

			.img {
				width: 146rpx;
				height: 146rpx;
				border-radius: 146rpx !important;
			}
		}

		.shop-name {
			font-size: 36rpx;
			display: -webkit-box;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			color: #333333;
		}

		.color-text {
			color: #333333;
		}
	}

	.header-info {
		position: relative;
		z-index: 1;
		padding: 130rpx 24rpx 24rpx 24rpx;
	}

	// 头部 end

	.level {
		border: 1rpx solid #FFFFFF;
		border-radius: 4rpx;
		font-size: 20rpx;
		padding: 3rpx 10rpx;
		margin: 0 10rpx;
	}

	.auth {
		border: 1rpx solid #FFFFFF;
		border-radius: 4rpx;
		font-size: 20rpx;
		padding: 3rpx 10rpx;
		margin: 0 10rpx;
	}

	.radius-16 {
		border-radius: 16rpx;
		overflow: hidden;
	}

	// 我的订单
	.my-order {
		image {
			width: 56rpx;
			height: 56rpx;
		}

		.item {
			position: relative;

			.jiaobiao {
				position: absolute;
				top: 20rpx;
				right: 30rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				border-radius: 100rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 38rpx;
				text-align: center;
				background-color: #FF6464;
				z-index: 9;
				transform: scale(0.65);
			}
		}
	}

	.general-view {
		z-index: 99;
		position: relative;
	}

	.tab-box {
		border: 1rpx solid $bgtheme;
		// padding: 3rpx 0;
		border-radius: 4rpx;

		.tab-item {
			padding: 5rpx 8rpx;
			border-radius: 4rpx;
			// margin: 0 3rpx;
			font-size: 24rpx;
		}

		.active {
			background-color: $bgtheme;
			color: #FFFFFF;
		}
	}

	.color-red {
		color: #FB2A25;
	}

	.day-view {
		height: 40rpx;
		width: 102rpx;
		border-radius: 20rpx;
		border: 1rpx solid #707070;
		color: #333333;
	}

	.margin-tp {
		margin-top: 20rpx;
	}

	.padding {
		padding: 16rpx;
	}

	.margin-top-sm {
		margin-bottom: 16rpx;
	}
</style>